<template>
<view class="com-wrap">
  <view class="tab-wrap">
    <view class="tab" :class="status == 1 && ' tab-active'" @click="status = 1">全部</view>
    <view class="tab" :class="status == 0 && ' tab-active'" @click="status = 0">待审核</view>
  </view>
  <view class="list">
    <view v-if="list.length === 0" style="padding-top: 100px;">
      <u-empty mode="list"></u-empty>
    </view>
    <view class="list-item" v-for="item in list" :key="item.id">
      <view class="row row1 u-row-between">
        <text  @click="toDetail(item)">{{ item.name }}</text>
        <u-switch size="45" active-color="#165DFF" :value="item.is_disable == 0"
                  @change="(e)=>onChangeProductStatus(e,item)"></u-switch>
      </view>
      <view class="row row2"  @click="toDetail(item)">产品类型：{{ item.type_txt }}</view>
      <view class="row row3 u-row-between"  @click="toDetail(item)">
        <view>
          创建时间：{{ item.create_time }}
        </view>
        <u-tag :text="item.is_disable_txt" bg-color="#E8F3FF" border-color="#E8F3FF" color="#165DFF"></u-tag>
      </view>
    </view>
  </view>
</view>
</template>


<script>
import {apiChangeProductStatus, apiGetProductList} from "../../../api/dynamic_code.js";

export default {
  name: "product_list",
  data() {
    return {
      status: 1,
      list: []
    };
  },
  watch: {
    status() {
      this.$nextTick(this.init);
    }
  },
  created() {
    this.init('');
    uni.$on('REFRESH_PRODUCT_LIST',()=>this.init(''));
  },
  destroyed(){
    uni.$off('REFRESH_PRODUCT_LIST')
  },
  methods: {
    async init() {
      uni.showLoading();
      try {
        const res = await apiGetProductList({page_no: 1, page_size: 1000, status: this.status});
        this.list = res.data.list;
      }finally {
        uni.hideLoading();
      }

    },
    async onChangeProductStatus(e, item) {
      await apiChangeProductStatus({id: item.id, is_disable: Number(e)});
      item.is_disable = Number(e);
      item.is_disable_txt = Number(e) == 0 ? '正常' : '禁用';
    },
    toDetail(item) {
      uni.navigateTo({
        url:'/yixu/pages/dynamic_code/product_create?id=' + item.id
      })
    }
  }
}
</script>


<style scoped lang="scss">

.com-wrap {
  //padding: 40rpx 30rpx;
  padding: 30rpx;
}

.tab-wrap {
  display: flex;
  justify-content: space-around;
  color: #1D2129;
  gap: 20rpx;

  .tab {
    border-radius: 40px;
    padding: 12rpx;
    flex: 1;
    text-align: center;
    background: #F7F8FA;
    font-size: 30rpx;
  }

  .tab-active {
    color: white;
    background: #165DFF;
  }
}

.list-item {
  background: white;
  padding: 30rpx;
  margin-top: 30rpx;
  border-radius: 10rpx;
  color: #3A3F4F;

  .row1 {
    font-size: 32rpx;
    font-weight: 500;
    color: rgba(17, 20, 31, 1);
  }

  view {
    margin-bottom: 4rpx;
  }
}

</style>
